<template>
	<view class="member">
		<view class="member-card">
			<IndexSwiper :dataList='swiperList'></IndexSwiper>
		</view>
		<view class="select-card">
			<view class="select-card-title">选择套餐</view>
			<view class="select-small-card-wrapper">
				<view :class="{ 'select-small-card': true, 'active': selectedIndex === index }"
				v-for="(item,index) in packageContentList"
			 	:key ="index" 
				@tap="selectCard(index, item.goods_id)">
					<view class="price">{{item.goods_name}}</view>
					<view>{{item.introduction}}</view>
				</view>
			</view>
			<view class="select-card-title" v-html="selectedGoodsContent"></view>
		</view>
		<view class="fiexed-box">
			<button class="fixed-button" @click="$noMultipleClicks(orderCreate)" :loading="!noClick" >支付{{selectedGoodsPrice}}元</button>
		</view>
		<Tabbar cureentPage='member'></Tabbar>
	</view>
</template>

<script>
	import IndexSwiper from '@/components/index/IndexSwiper.vue'
	import Tabbar from '@/components/common/Tabbar.vue'
	import request from "../../api/request";
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				packageContentList:[],
				selectedIndex: 0,  // 当前选中的卡片索引
				swiperList:[
					{pic_path:'https://kx.taipingkeji.com/upload/1/common/images/20231219/20231219043858170297513868468.png'},
					
				],
				currentNum: 0,
				selectedCard: '',
				selectedGoodsContent:'',
				selectedGoodsPrice:'',
				selectedSku_id:'',
				token:'',
				member_id:'',
				selectedGoods_id:'',
				openid:'',
				orderInfo:{},
				noClick:true,
			}
			
		},
		computed:{
			...mapState({
				loginStatus:state =>state.user.loginStatus,
				userInfo:state =>state.user.userInfo,
			})
		},
		components:{
			Tabbar,
			IndexSwiper
		  },
		onLoad() {
			this.token = uni.getStorageSync('token');
			this.getPackageContent(),
			// 在获取到套餐内容数据后，找到指定的套餐，将其设为默认值;
		    this.$watch('packageContentList', () => {
				if (this.packageContentList.length > 0) {
				  const defaultSelectedIndex = 0; // 默认选中第一个
				  const defaultSelectedPackage = this.packageContentList[defaultSelectedIndex];
				  this.selectedIndex = defaultSelectedIndex;
				  this.selectedGoodsContent = defaultSelectedPackage.goods_content;
				  this.selectedGoodsPrice = defaultSelectedPackage.price;
				  this.selectedSku_id = defaultSelectedPackage.sku_id;
				  this.selectedGoods_id = defaultSelectedPackage.goods_id;
				  
				}
		    });
			
			this.openid = uni.getStorageSync('openid');
			this.member_id = JSON.parse(uni.getStorageSync('userInfo')).member_id;
			},
		methods: {
			selectCard(index,goods_id) {
			    this.selectedIndex = index;
				const selectedPackage = this.packageContentList.find(item => item.goods_id === goods_id);
				this.selectedGoodsContent = selectedPackage.goods_content;
				this.selectedGoodsPrice = selectedPackage.price;
				this.selectedSku_id = selectedPackage.sku_id;
				this.selectedGoods_id = selectedPackage.goods_id;
				console.log(this.selectedGoods_id)
			  },
			getPackageContent(){
				request({
					url: '/kx/device/getPackageContent',
					data:{
						token:this.token,
					},
					successCb: (res) => {
						this.packageContentList = res.data;
					},
				});
			},
			getUserInfo(){
				const that = this
				request({
					url: '/kx/index/getUserInfo',
					 data: { token: that.token },
					successCb: (res) => {
						// 保存用户信息
						// console.log(res.data.data,11)
						uni.setStorageSync('userInfo',JSON.stringify(res.data.data))
					},
				});
			},
			orderCreate(){
				const that = this
				// #ifdef H5
				request({
						url: '/kx/Order/create',
						data:{
							token:this.token,
							member_id:this.member_id,
							sku_id:this.selectedSku_id,
							num:'1',
							app_type:'h5',
							app_type_name:'H5',
						},
						successCb: (res) => {
							let webUrl = res.data;
							window.location.href = webUrl
						},
					});
				//#endif
				
				// #ifdef MP-WEIXIN
				request({
						url: '/kx/order/formal_pay',
						data:{
							token:that.token,
							goods_id:that.selectedGoods_id,
							openid:that.openid,
						},
						successCb: (res) => {
							// console.log(res)
							that.orderInfo = res.data.credential,
							console.log(that.orderInfo)
							uni.requestPayment({
							    provider: "wxpay", 
								appid: that.orderInfo.appId,  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
								nonceStr: that.orderInfo.nonceStr, // 随机字符串
								package: that.orderInfo.package,        // 固定值
								prepayId: that.orderInfo.prepayId, // 统一下单订单号 
								timeStamp: that.orderInfo.timeStamp,        // 时间戳（单位：秒）
								signType: that.orderInfo.signType, // 签名，这里用的 MD5/RSA 签名
								paySign:that.orderInfo.paySign,
								success(res) {
									console.log('支付成功',res);
									uni.$u.toast('支付成功')
									that.getUserInfo()
								},
							    fail(e) {
									console.log('支付失败',e);
									uni.$u.toast('支付失败')
								}
							})
						},
					});
				//#endif
				
			}

		  }
	}
</script>

<style lang="scss">
page{
	background-image: url('https://kx.taipingkeji.com/upload/1/common/images/20231218/20231218101134170290869461498.jpg');
	background-color: #f6f6f6; 
}
.member-card{
	margin-left: 40rpx;
	margin-right: 40rpx;
}

.indicator {
		@include flex(row);
		justify-content: center;
	}

.indicator-num {
	padding: 2px 0;
	background-color: rgba(0, 0, 0, 0.35);
	border-radius: 100px;
	width: 35px;
	@include flex;
	justify-content: center;

	&__text {
		 color: #FFFFFF;
		 font-size: 12px;
	 }
}
.select-card{
	margin-top: -20rpx;
	margin-left: 40rpx;
	margin-right: 40rpx;
	bottom:auto;
	border-bottom-right-radius: 10rpx;
	border-bottom-left-radius: 10rpx;
	overflow: auto;
	background-color: #ffffff;
}
.select-card-title{
	margin-top: 30rpx;
	margin-left: 30rpx;
	margin-right: 30rpx;
	font-size: 28rpx;
	font-weight: 700;
}
.select-small-card-wrapper {
  margin-top: 20rpx;
  display: flex;
  justify-content: space-around;
  flex-wrap: nowrap; 
}
.select-small-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 280rpx;
  height: 200rpx; 
  border: 2px solid #ccc; 
  cursor: pointer; 
  border-radius: 10rpx;
}
.select-small-card.active {
  border-color: #f8b89f; 
  background-color: #fef3ef;
}
.price{
	font-size: 50rpx;
}

.fixed-button{
	color: #fff;
	font-size: 28rpx;
	width: 471rpx; 
	height: 83rpx; 
	line-height: 90rpx;
	border-radius: 50rpx;
	background-color: #f1794f;
	position: fixed;
	bottom: 150rpx;
	left: 0;
	right: 0; 
	margin: 0 auto;
	z-index: 1000;
}

// .fixed-button:disabled {
//     background-color: rgba(241, 121, 79);
//     cursor: not-allowed; 
// }

		
</style>
